

import * as THREE from 'three';
import IElement from 'components/Three/interface/IElement';
import ColorInput from 'components/ColorInput';
// import styles from './index.module.less';
import Controller from 'Controller'
import React from "react";
import { Color } from 'three';

export default function BaseProperties() {

    const threeController = Controller.instance.useMemo(s => s.threeController, []);

    const selectedElementUuid = threeController.useMemo(s => s.selectedElementUuid, []);

    const elementMap = threeController.useMemo(s => s.elementMap, []);

    const element: IElement<THREE.AmbientLight> | undefined = React.useMemo(() => selectedElementUuid ? elementMap.get(selectedElementUuid) : undefined, [elementMap, selectedElementUuid])

    const onChangeColorInput = React.useCallback((e: number) => {
        if (!element) return;

        threeController.pipeline(async s => {
            element.version++;
            element.object3D.color = new Color(e);
        })()

    }, [element, threeController])

    if (!element) return <></>;

    return (
        <ColorInput value={element.object3D.color.getHex()} onChange={onChangeColorInput} />
    )
}
